<template>
  <div class="driver_control">
    <el-row class="content-head" style="width: 100%">
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
      </el-col>
    </el-row>
    <div class="control_box">
      <div class="control_leftcontent">
        <controlLeft></controlLeft>
      </div>
      <div class="control_rightcontent">
        <controlRight></controlRight>
      </div>
    </div>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import controlLeft from "@/components/receiving/control/control_left.vue";
import controlRight from "@/components/receiving/control/control_right.vue";
export default {
  name: "driver_control",
  data() {
    return {};
  },
  components: {
    HeadTitle,
    controlLeft,
    controlRight,
  },
  methods: {},
};
</script>
<style lang="less" scoped>
.driver_control {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  justify-content: flex-start;

  > div {
    width: 100%;
  }
  .control_box {
    width: 100%;
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 20px;
    align-items: center;
    overflow: auto;
    > div {
      // background-color: #fff;
      box-shadow: 0 0 10px 2px #e3e3e3;
      border-radius: 5px;
    }
    .control_leftcontent {
      width: 25%;
      height: 100%;
      margin-right: 20px;
    }

    .control_rightcontent {
      flex: 1;
      height: 100%;
      background-color: #fff;
    }
  }
}
</style>
